<template>
  <div class="app-container" style="height: 100%">
    <div class="app-container-inner">
      <el-container class="container">
        <el-aside width="300px">
          <div class="menu_card">
            <el-input
              v-model.trim="searchVo"
              placeholder="应用搜索"
              clearable
              @keyup.enter="searchValFun"
              @clear="is_showArr = [1, 2, 3, 4, 5, 6, 7, 8, 9]"
            />
            <ul class="ul_menu">
              <li class="li_menu" :class="{ is_li_menu: typeVal == 1 }" @click="onchange(1)">
                所有应用
              </li>
              <p>分类</p>
              <li class="li_menu" :class="{ is_li_menu: typeVal == 2 }" @click="onchange(2)">
                数据同步
              </li>
              <li class="li_menu" :class="{ is_li_menu: typeVal == 3 }" @click="onchange(3)">
                联保平台
              </li>
              <li class="li_menu" :class="{ is_li_menu: typeVal == 4 }" @click="onchange(4)">
                公司营销
              </li>
              <li class="li_menu" :class="{ is_li_menu: typeVal == 5 }" @click="onchange(5)">
                视频协助
              </li>
              <li class="li_menu" :class="{ is_li_menu: typeVal == 6 }" @click="onchange(6)">
                快递物流
              </li>
              <p>订单管理</p>
              <li class="li_menu" :class="{ is_li_menu: typeVal == 7 }" @click="onchange(7)">
                已开通应用
              </li>
            </ul>
          </div>
        </el-aside>
        <el-main>
          <div class="placeholder_x">
            <div class="top_left">
              <p class="title_label">精选应用</p>
              <div class="icon_box">
                <div class="icon_item">
                  <div class="icon_img icon_img1">
                    <el-icon size="18">
                      <Cpu />
                    </el-icon>
                  </div>
                  <span class="text_img"
                    >定期巡检<span class="tip_img"
                      ><el-icon> <CaretLeft /> </el-icon>Hot</span
                    ></span
                  >
                  <el-icon>
                    <ArrowRightBold />
                  </el-icon>
                </div>
                <div class="icon_item">
                  <div class="icon_img icon_img2">
                    <el-icon size="18">
                      <Van />
                    </el-icon>
                  </div>
                  <span class="text_img"
                    >寄修返厂
                    <span class="tip_img"
                      ><el-icon> <CaretLeft /> </el-icon>Hot</span
                    ></span
                  >
                  <el-icon>
                    <ArrowRightBold />
                  </el-icon>
                </div>
                <div class="icon_item">
                  <div class="icon_img icon_img3">
                    <el-icon size="18">
                      <VideoCamera />
                    </el-icon>
                  </div>
                  <span class="text_img"
                    >远程视频<span class="tip_img"
                      ><el-icon> <CaretLeft /> </el-icon>Hot</span
                    ></span
                  >
                  <el-icon>
                    <ArrowRightBold />
                  </el-icon>
                </div>
              </div>
            </div>
            <div class="top_right">
              <el-image :src="img1" fit="contain"></el-image>
            </div>
          </div>
          <div class="data_box">
            <div
              v-if="is_showArr.length == 0"
              style="display: flex; justify-content: center; flex: 1; width: 100%"
            >
              <el-empty :image-size="200" description="查无数据" />
            </div>
            <!-- //saas -->
            <div v-if="is_showArr.includes(1)" class="data_item" @click="goAppDetail(1)">
              <div class="data_img">
                <el-image :src="img137" fit="contain"></el-image>
              </div>
              <div class="content_item">
                <p class="title_item">金蝶云星空-数据同步</p>
                <p class="tip_item">适用于金蝶云星空企业版/标准版</p>
              </div>
              <HPlainButton>查看</HPlainButton>
              <HPlainButton @click.stop="goCfigSet(1)">去配置</HPlainButton>
            </div>
            <!--   格美淇 隐藏-->
            <!-- <div class="data_item" v-if="is_showArr.includes(1)">
              <div class="data_img">
                <el-image :src="img137" fit="contain"></el-image>
              </div>
              <div class="content_item">
                <p class="title_item">金蝶云星空-数据同步</p>
                <p class="tip_item">适用于金蝶云星空企业版/标准版</p>
              </div>
              <HButton>未开通</HButton>
            </div> -->
            <div v-if="is_showArr.includes(2)" class="data_item" @click="goAppDetail(2)">
              <div class="data_img">
                <el-image :src="img2" fit="contain"></el-image>
              </div>
              <div class="content_item">
                <p class="title_item">金蝶云星辰-数据同步</p>
                <p class="tip_item">打通资料及单据的同步和反写</p>
              </div>
              <HButton>未开通</HButton>
            </div>
            <div v-if="is_showArr.includes(3)" class="data_item" @click="goAppDetail(3)">
              <div class="data_img">
                <el-image :src="img137" fit="contain"></el-image>
              </div>
              <div class="content_item">
                <p class="title_item">金蝶云Kis-数据同步</p>
                <p class="tip_item">打通资料及单据的同步和反写</p>
              </div>
              <HButton>未开通</HButton>
            </div>
            <div v-if="is_showArr.includes(4)" class="data_item" @click="goAppDetail(4)">
              <div class="data_img" style="background-color: rgba(229, 0, 17, 1)">
                <el-image :src="img4" fit="contain"></el-image>
              </div>
              <div class="content_item">
                <p class="title_item">用友U8<sup>+</sup>数据同步</p>
                <p class="tip_item">打通资料及单据的同步和反写</p>
              </div>
              <HPlainButton>查看</HPlainButton>
              <HPlainButton @click.stop="goCfigSet(4)">去配置</HPlainButton>
            </div>
            <!-- <div class="data_item" v-if="is_showArr.includes(4)">
              <div class="data_img" style="background-color: rgba(229, 0, 17, 1)">
                <el-image :src="img4" fit="contain"></el-image>
              </div>
              <div class="content_item">
                <p class="title_item">用友U8<sup>+</sup>数据同步</p>
                <p class="tip_item">打通资料及单据的同步和反写</p>
              </div>
              <HButton>未开通</HButton>
            </div>  -->
            <div v-if="is_showArr.includes(5)" class="data_item" @click="goAppDetail(5)">
              <div class="data_img">
                <el-image :src="img5" fit="contain"></el-image>
              </div>
              <div class="content_item">
                <p class="title_item">神州联保</p>
                <p class="tip_item">打通资料及单据的同步和反写</p>
              </div>
              <HButton>未开通</HButton>
            </div>
            <div v-if="is_showArr.includes(6)" class="data_item" @click="goAppDetail(6)">
              <div class="data_img">
                <el-icon size="24" color="#fff">
                  <Van />
                </el-icon>
              </div>
              <div class="content_item">
                <p class="title_item">寄修返厂</p>
                <p class="tip_item">打通资料及单据的同步和反写</p>
              </div>
              <HButton>未开通</HButton>
            </div>
            <div v-if="is_showArr.includes(7)" class="data_item" @click="goAppDetail(7)">
              <div class="data_img">
                <el-image :src="img137" fit="contain"></el-image>
              </div>
              <div class="content_item">
                <p class="title_item">定期巡检</p>
                <p class="tip_item">打通资料及单据的同步和反写</p>
              </div>
              <HButton>未开通</HButton>
            </div>
            <div v-if="is_showArr.includes(8)" class="data_item" @click="goAppDetail(8)">
              <div class="data_img">
                <el-icon size="24" color="#fff">
                  <VideoCamera />
                </el-icon>
              </div>
              <div class="content_item">
                <p class="title_item">远程视频</p>
                <p class="tip_item">打通资料及单据的同步和反写</p>
              </div>
              <HButton>未开通</HButton>
            </div>
            <div v-if="is_showArr.includes(9)" class="data_item" @click="goAppDetail(9)">
              <div class="data_img" style="background-color: #fff">
                <el-image :src="img9" fit="contain"></el-image>
              </div>
              <div class="content_item">
                <p class="title_item">快递面单打印</p>
                <p class="tip_item">打通资料及单据的同步和反写</p>
              </div>
              <HButton>未开通</HButton>
            </div>
          </div>
          <!-- <QuotaOverview v-if="typeVal == 1"></QuotaOverview> -->

          <!-- 企业信息 -->
          <!-- <EnterpriseInformation v-if="typeVal == 2"></EnterpriseInformation> -->

          <!-- 全局设置 -->
          <!-- <GlobalSetting v-if="typeVal == 3"></GlobalSetting> -->

          <!-- 全部应用 -->
          <!-- <FullApplication v-if="typeVal == 4"></FullApplication> -->

          <!-- 账单明细 -->
          <!-- <BillingDetails v-if="typeVal == 6"></BillingDetails> -->
        </el-main>
      </el-container>
    </div>
  </div>
</template>

<script setup lang="ts">
  // import FullApplication from './components/fullApplication/index.vue'
  // import QuotaOverview from './components/quotaOverview/index.vue'
  // import EnterpriseInformation from './components/information/index.vue'
  // import GlobalSetting from './components/globalSetting/index.vue'
  // import BillingDetails from './components/billingDetails/index.vue'
  // import HelpCenter from './components/helpCenter/index.vue'
  import img137 from '@/assets/image/apply/item_137.png'
  import img1 from '@/assets/image/apply/img_1.png'
  import img2 from '@/assets/image/apply/item_2.png'
  import img4 from '@/assets/image/apply/item_4.png'
  import img5 from '@/assets/image/apply/item_5.png'
  import img9 from '@/assets/image/apply/item_9.png'
  import { ref } from 'vue'
  import { useRouter } from 'vue-router'
  import { ElMessage } from 'element-plus'
  import routeComponentName from '@/config/route-component-name'

  defineOptions({
    name: routeComponentName.appCenter.appCenter,
  })

  const router = useRouter()
  const typeVal = ref(1)
  const is_showArr = ref([1, 2, 3, 4, 5, 6, 7, 8, 9]) //隐藏
  const searchVo = ref('') //搜索关键词
  const titleTag = ref([
    { tag: '金蝶云星空-数据同步', val: 1 },
    { tag: '金蝶云星辰-数据同步', val: 2 },
    { tag: '金蝶云Kis-数据同步', val: 3 },
    { tag: '用友U8数据同步', val: 4 },
    { tag: '神州联保', val: 5 },
    { tag: '寄修返厂', val: 6 },
    { tag: '定期巡检', val: 7 },
    { tag: '远程视频', val: 8 },
    { tag: '快递面单打印', val: 9 },
  ])
  const searchValFun = () => {
    is_showArr.value = []
    titleTag.value.filter((o) => {
      if (o.tag.includes(searchVo.value)) {
        is_showArr.value.push(o.val)
      }
    })
  }
  const onchange = (val) => {
    typeVal.value = val
    switch (val) {
      case 1:
        is_showArr.value = [1, 2, 3, 4, 5, 6, 7, 8, 9]
        break
      case 2:
        is_showArr.value = [1, 2, 3, 4]
        break
      case 3:
        is_showArr.value = [5]
        break
      case 4:
        is_showArr.value = [6, 7]
        break
      case 5:
        is_showArr.value = [8]
        break
      case 6:
        is_showArr.value = [9]
        break
      case 7:
        is_showArr.value = [1, 4] //saas
        break
    }
  }
  const goAppDetail = (val) => {
    switch (val) {
      case 1:
        router.push({ path: '/application/centre/app_detail/1' })
        break
      // case 2:

      // break;
      // case 3:

      // break;
      case 4:
        router.push({ path: '/application/centre/app_detail/4' })
        break
      // case 5:

      // break;
      // case 6:

      // break;
      // case 7:

      // break;
      // case 8:

      // break;
      // case 9:

      // break;
      default:
        ElMessage({
          message: '正在升级维护中，敬请期待...',
          type: 'success',
          plain: true,
          duration: 5000,
          showClose: true,
        })
        break
    }
  }
  // 去配置
  const goCfigSet = (val) => {
    switch (val) {
      case 1:
        router.push({ path: '/application/connection' })
        break
      // case '2':

      // break;
      // case 3:

      // break;
      case 4:
        router.push({ path: '/application/yonyou' })
        break
      // case 5:

      // break;
      // case 6:

      // break;
      // case 7:

      // break;
      // case 8:

      // break;
      // case 9:

      // break;
      default:
        ElMessage({
          message: '正在升级维护中，敬请期待...',
          type: 'success',
          plain: true,
          duration: 5000,
          showClose: true,
        })
        break
    }
  }
</script>

<style scoped lang="scss">
  @import './index';
</style>
